<template>
	<view class="warp">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="">
				<u-image
					src="/static/images/icon/warning-circle-white.svg"
					width="44rpx"
					height="44rpx"
				></u-image>
			</view>
		</view>
		<view style="margin-top: 32rpx;padding: 0 40rpx;">
			<view style="width: 100%;display: flex; justify-content: space-between;">
				<view>
					<view style="text-align: center; border-radius: 15px;background: #000;color: #FFF;padding: 8rpx 24rpx;font-size: 24rpx;display: inline-block;">
						開始賺錢的第一步
					</view>
					<view style="text-align: center;text-shadow: 0 4px 4px rgba(0, 122, 255, 0.32);font-family: 'GenSekiGothic TW';font-size: 108rpx;font-style: normal;font-weight: 900;line-height: 140%;letter-spacing: 0.76px;color: #FFF;">
						成為達人
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/medal.svg"
						width="200rpx"
						height="200rpx"
					></u-image>
				</view>
			</view>
			
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">專屬權益</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			
			<view style="margin-top: 32rpx;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/money.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							彈性自訂工時
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							時間自由調配
						</view>
					</view>
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/group.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							打造職人頁
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							社群作品集
						</view>
					</view>
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/task.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							發佈技能
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							不限形式上架
						</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/lightning.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							即時搶單
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							快速上工
						</view>
					</view>
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/info.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							防放鳥機制
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							接案有保障
						</view>
					</view>
					<view style="background-color: rgba(255,255,255,0.8);border-radius: 26rpx;width:210rpx;padding:40rpx 0;">
						<view style="margin: 16rpx auto;display: block;width: 72rpx;">
							<u-image
								src="/static/images/icon/guide/hand.svg"
								width="72rpx"
								height="72rpx"
							></u-image>
						</view>
						<view style="color: #188CA2;font-size: 28rpx;text-align: center;">
							隱私保護
						</view>
						<view style="margin-top:12rpx;color: #6A707C;font-size: 24rpx;text-align: center;">
							個資不公開
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">開通條件</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="120" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border: 2rpx solid #FFF; border-radius: 24rpx;background-color: rgba(255,255,255,0.4);box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);">
					<view style="color: #020202;font-size: 28rpx;font-weight: 500;">
						只需完成兩個步驟，即可開始接案！
					</view>
					<view style="margin-top: 24rpx;">
						<u-line-progress 
							:percentage="percentage" 
							activeColor="#378CFC"
							height="24"
							:showText="false"
						></u-line-progress>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
						<view style="font-size: 28rpx;color: #378CFC;font-weight: 500;">
							{{step}}/2 {{stepText}}
						</view>
						<view style="font-size: 24rpx;color: #6A707C;">
							{{statusText}}
						</view>
					</view>
					<view style="margin-top:56rpx;">
						<view v-if="cert" style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;background-color: #FFF;border-radius: 29rpx;">
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<view>
									<u-image
										src="/static/images/icon/guide/hand_blue.svg"
										width="56rpx"
										height="56rpx"
									></u-image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="color: #378CFC;font-size: 32rpx;font-weight: 500;">完成實名認證</view>
									<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">保障雙方權益與金流安全</view>
								</view>
							</view>
							<view>
								<u-image
									src="/static/images/icon/guide/radio.svg"
									width="56rpx"
									height="56rpx"
								></u-image>
							</view>
						</view>
						<view v-else style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;background-color: #FFF;border-radius: 29rpx;">
							<view @click="goCertFn" style="display: flex;justify-content: flex-start;align-items: center;">
								<view>
									<u-image
										src="/static/images/icon/guide/hand_black.svg"
										width="56rpx"
										height="56rpx"
									></u-image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="color: #020202;font-size: 32rpx;font-weight: 500;">完成實名認證</view>
									<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">保障雙方權益與金流安全</view>
								</view>
							</view>
							<view>
								<u-image
									src="/static/images/icon/guide/right.svg"
									width="56rpx"
									height="56rpx"
								></u-image>
							</view>
						</view>
						<view v-if="push" style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;margin-top: 24rpx;background-color: #FFF;border-radius: 29rpx;">
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<view>
									<u-image
										src="/static/images/icon/guide/lightning_blue.svg"
										width="56rpx"
										height="56rpx"
									></u-image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="color: #378CFC;font-size: 32rpx;font-weight: 500;">發佈第一個技能</view>
									<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">審核後即可上架接案</view>
								</view>
							</view>
							<view>
								<u-image
									src="/static/images/icon/guide/radio.svg"
									width="56rpx"
									height="56rpx"
								></u-image>
							</view>
						</view>
						<view v-else style="display: flex;justify-content: space-between;align-items: center;padding: 24rpx;margin-top: 24rpx;background-color: #FFF;border-radius: 29rpx;">
							<view @click="goPushFn" style="display: flex;justify-content: flex-start;align-items: center;">
								<view>
									<u-image
										src="/static/images/icon/guide/lightning_black.svg"
										width="56rpx"
										height="56rpx"
									></u-image>
								</view>
								<view style="margin-left: 20rpx;">
									<view style="color: #020202;font-size: 32rpx;font-weight: 500;">發佈第一個技能</view>
									<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">審核後即可上架接案</view>
								</view>
							</view>
							<view>
								<u-image
									src="/static/images/icon/guide/right.svg"
									width="56rpx"
									height="56rpx"
								></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="75" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">邀請好友拿好禮</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="75" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="text-align: center;">
						<view style="margin: 0 auto;display: block;width: 56rpx;">
							<u-image
								src="/static/images/icon/guide/hand_gold.svg"
								width="56rpx"
								height="56rpx"
							></u-image>
						</view>
						<view style="margin-top: 24rpx;font-size: 32rpx;color: #020202;font-weight: 500;">邀請好友，就有機會贏得 iPhone 17！</view>
						<view style="margin-top: 24rpx;font-size: 24rpx;color: #6A707C;">還有週週抽超商禮卷，人人都有機會！</view>
						<view style="margin-top: 24rpx;background-color: #27C5D6;color: #FFF;font-size: 32rpx;padding: 24rpx 100rpx;border-radius: 100rpx;">
							查看活動辦法
						</view>
					</view>
				</view>
			</view>
			
			<view style="width: 100%;margin-top: 84rpx;display: flex;justify-content: space-between;align-items: center;">
				<svg xmlns="http://www.w3.org/2000/svg" width="90" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M5 2.5L0 0.113249V5.88675L5 3.5V2.5ZM119 3.5C119.276 3.5 119.5 3.27614 119.5 3C119.5 2.72386 119.276 2.5 119 2.5V3V3.5ZM4.5 3V3.5H119V3V2.5H4.5V3Z" fill="white"/>
				</svg>
				<view style="color: #FFF;text-shadow: 0 0 4px rgba(0, 122, 255, 0.32);font-size: 32rpx;font-weight: 500;">小組長團體挑戰</view>
				<svg xmlns="http://www.w3.org/2000/svg" width="90" height="6" viewBox="0 0 120 6" fill="none">
					<path d="M1 2.5C0.723858 2.5 0.5 2.72386 0.5 3C0.5 3.27614 0.723858 3.5 1 3.5V3V2.5ZM115 3.5L120 5.88675V0.113249L115 2.5V3.5ZM1 3V3.5H115.5V3V2.5H1V3Z" fill="white"/>
				</svg>
			</view>
			<view style="margin-top: 32rpx;">
				<view style="padding: 40rpx 32rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0 6.045px 12.09px 0 rgba(0, 122, 255, 0.20);margin: 0 auto;">
					<view style="text-align: center;">
						<view style="margin: 0 auto;display: block;width: 56rpx;">
							<u-image
								src="/static/images/icon/task_gold.svg"
								width="56rpx"
								height="56rpx"
							></u-image>
						</view>
						<view style="margin-top: 24rpx;font-size: 32rpx;color: #020202;font-weight: 500;">想挑戰更高獎金？參加獎金池賽</view>
						<view style="margin-top: 24rpx;font-size: 24rpx;color: #6A707C;">獎金池持續增加，目前金額：NT$20,000</view>
						<view style="margin-top: 24rpx;background-color: #27C5D6;color: #FFF;font-size: 32rpx;padding: 24rpx 100rpx;border-radius: 100rpx;">
							參加獎金池比賽
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 84rpx;">
				<view style="color: #FFF;font-size: 24rpx;">注意事項</view>
				<view class="rich-text">
					<u-parse :content="richText" :tagStyle="style"></u-parse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return{
			step:0,
			stepText:'未開始',
			percentage:0,
			statusText:'開通完成度',
			cert:0,
			push:0,
			
			richText:`<div>
						<ul>
							<li>每位好友僅能被計算一次，重複邀請或使用虛假帳號不計入。</li>
							<li>被邀請人需完成實名認證與技能發佈，方算有效邀請。</li>
							<li>排行榜每日凌晨更新，僅供參考。</li>
							<li>最終得獎名單以系統結算為準。</li>
							<li>獎品明細
							<ul>
								<li>週榜（每 7 天）</li>
								<ul>
									<li>NT$100 超商禮券</li>
								</ul>
								<li>總榜（45 天）</li>
								<ul>
									<li>總累積第一名：iPhone 17 256GB 霧藍色 乙台</li>
									<li>總累積第二名：NT$1,000 超商禮券 乙張</li>
									<li>總累積第三名：NT$500 超商禮券 乙張</li>
								</ul>
							</ul>
							<li>獎品發放</li>
							<ul>
								<li>週榜獎品將於公布後 7 個工作日內發送；</li>
								<li>總榜獎品將於公布後 14 個工作日內寄出 / 發放。</li>
								<li>獎品不得兌換現金或轉讓，若因用戶資訊錯誤導致無法發放，平台不再補寄。</li>
							</ul>
							<li>若發現作弊、灌水、利用非正當方式邀請，平台有權取消資格。</li>
							<li>平台保留活動最終解釋與修改權，如異動將公告於 App 內</li>
							<li>本活動由 煦澄科技股份有限公司主辦。若依中華民國稅法規定需開立扣繳憑單，得獎者需配合提供身份資料。</li>
						</ul>
						</div>`,
			style:{
				// 字符串的形式
				ul:"padding-left: 8px;list-style-position: inside;",
				li: "color: #fff;font-size:24rpx;padding-left: 8rpx;list-style-position: inside;"
			}
		}
	},
	onLoad(option) {
		const user_info = uni.getStorageSync('userInfo');
		console.log( user_info.verification )
		if( user_info.verification == 1 ){
			this.cert = 1;
			console.log(this.cert)
		}
	},
	methods:{
		goBack(){
			uni.navigateBack()
		},
		goCertFn(){
			uni.navigateTo({
				url:'/pages/my/auth'
			})
		},
		goPushFn(){
			uni.navigateTo({
				url:'/pages/demand/publish?type=expert'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.warp{
		width: 100%;
		background: linear-gradient(0deg, #27C5D6 31.94%, #A6EFFF 58.05%, #77DFEA 73.03%, #27C5D6 100%);
		box-sizing: border-box;
		padding-bottom: 64rpx;
		
		.rich-text{
			li{
				color: #fff !important ;
			}
		}
	}
</style>